<template>
  <div class="main-page" style="min-width:1366px;">
    <el-form ref="form">
      <!-- 搜索栏 -->
      <BaseSearchBar v-on:ChildSearchEvent="getSearchReviewList"></BaseSearchBar>
    </el-form>
    <!-- 表单 -->
    <el-card :body-style="{ padding: '0px' }" class="box-card">
      <!-- <div class="SearchT">
        <div class="tableLable">数据管理列表</div>
      </div>-->
      <div class="tableStyle">
        <el-table
          ref="multipleTable"
          class="card-table"
          :data="ResultsReviewList"
          tooltip-effect="dark"
          style="font-size:12px"
          :header-cell-style="{ background: '#3F9DFD', color: '#FFF' }"
          size="medium"
          height="634px"
          stripe
          border
        >
          <el-table-column type="index" width="50" label="序号"></el-table-column>

          <el-table-column label="滤镜操作" width="73px" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-button
                size="mini"
                v-if="scope.row.exam_grade==1||scope.row.exam_grade==2"
                type="text"
                @click="dialogReview(scope.row.id)"
              >查看详情</el-button>
              <el-button
                size="mini"
                v-else-if="scope.row.filter_id!=null&&scope.row.filter_id>0"
                type="text"
                class="viewDeta"
                @click="dialogReview(scope.row.id)"
              >编辑滤镜</el-button>
              <el-button
                size="mini"
                v-else
                type="text"
                class="addDeta"
                @click="dialogReview(scope.row.id)"
              >新增滤镜</el-button>
            </template>
          </el-table-column>
          <el-table-column label="查看处方" show-overflow-tooltip width="73px">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="dialogOrder(scope.row.id)">查看明细</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="deptName" label="科室名称" show-overflow-tooltip width="125px" />
          <el-table-column prop="doctorName" label="医生名称" width="80px" show-overflow-tooltip />

          <el-table-column prop="type_txt" label="审查类型" width="75px" show-overflow-tooltip />
          <el-table-column prop="slCode_txt" label="审查级别" width="70px" show-overflow-tooltip>
            <template slot-scope="scope">
              <div class="blog-content" v-html="scope.row.slCode_txt"></div>
            </template>
          </el-table-column>
          <el-table-column prop="drugNames" label="相关药品" show-overflow-tooltip />
          <el-table-column prop="warning" label="警示信息" show-overflow-tooltip />
          <el-table-column label="滤镜状态" show-overflow-tooltip width="80px">
            <template slot-scope="scope">{{(scope.row.filter_state==1)?"已生成":"未生成"}}</template>
          </el-table-column>
          <el-table-column prop="examDate" label="审查时间" show-overflow-tooltip>
            <template slot-scope="scope">{{getDate(scope.row.examDate)}}</template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryInfo.pagenum"
            :page-sizes="[20, 50, 100]"
            :page-size="queryInfo.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            background
          ></el-pagination>
        </div>
      </div>
    </el-card>
    <el-dialog
      title="审查结果详情"
      :visible.sync="dialogVisible"
      width="45%"
      style="DialogCard"
      :before-close="handleClose"
    >
      <el-card class="dialogFilter">
        <el-form
          :inline="true"
          :model="this.resultList"
          label-width="82px"
          class="demo-form-inline"
        >
          <div class="dialogForm">
            <el-form-item label="医生编码">
              <el-input size="mini" v-model="resultList.doctorCode"></el-input>
            </el-form-item>
            <el-form-item label="医生名称" style="margin-left: 8px;">
              <el-input size="mini" v-model="resultList.doctorName"></el-input>
            </el-form-item>
          </div>
          <div class="dialogForm">
            <el-form-item label="相关药品" class="drugForm">
              <el-input size="mini" v-model="resultList.drugName"></el-input>
            </el-form-item>
          </div>
          <div class="dialogForm">
            <el-form-item label="审查类型">
              <el-input size="mini" v-model="resultList.type_txt"></el-input>
            </el-form-item>
            <el-form-item label="病人姓名" style="margin-left: 8px;">
              <el-input size="mini" v-model="resultList.patientName"></el-input>
            </el-form-item>
          </div>
          <div class="dialogForm">
            <el-form-item label="原审查级别" class="drugForm">
              <el-input size="mini" v-model="resultList.slCode_txt"></el-input>
            </el-form-item>
          </div>
        </el-form>
      </el-card>
      <!-- 说明书 -->
      <el-card class="dialogFilter" style="margin-top:10px;">
        <el-form :inline="true" :model="this" class="demo-form-inline">
          <el-form-item label="原审查简短描述" class="drugForm" style="margin-bottom:0px">
            <el-input size="mini" v-model="resultList.warning"></el-input>
          </el-form-item>
          <el-form-item label="原审查详细描述">
            <el-input type="textarea" disabled v-html="resultList.abstractDesc"></el-input>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card class="dialogFilter" style="margin-top:10px;">
        <el-form :inline="true" :model="this">
          <div>
            <el-form-item label="新设审查级别" class="drugForm" style="margin-bottom:0px">
              <el-radio-group v-model="resultList.slCode">
                <el-radio :label="-1">忽略</el-radio>
                <el-radio :label="0">拦截</el-radio>
                <el-radio :label="1">禁忌</el-radio>
                <el-radio :label="2">不推荐</el-radio>
                <el-radio :label="3">轻微</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="新设审查简短描述" class="XinShenCha">
              <el-input type="textarea" v-model="resultList.NewExamDescri"></el-input>
            </el-form-item>
          </div>
        </el-form>
      </el-card>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" type="success" @click="SaveExamEditFilter">保存滤镜</el-button>
        <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="处方信息"
      :visible.sync="dialogPrescriptionVisible"
      width="60%"
      :before-close="handleClose"
    >
      <el-card class="dialogFilter PrescripCard">
        <el-form :model="OrderData" label-width="80px" class="PrescripInfo">
          <el-row style="margin-left:15px">
            <el-col :span="16">
              <el-form-item label="门/急/住院号">
                <el-input v-model="OrderData.mz_jz_zyh" size="mini"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="科室名称">
                <el-input v-model="OrderData.deptName" size="mini"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form label-width="120px" class="PrescripInfo">
                <el-form-item style="margin-left:10px" label="门诊流水/住院次数">
                  <el-input v-model="OrderData.lsh_num" size="mini"></el-input>
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="16">
              <el-row>
                <el-col :span="8">
                  <el-form-item label="病人姓名">
                    <el-input v-model="OrderData.patientName" size="mini"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="性别">
                    <el-input v-model="OrderData.sex" size="mini"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="年龄">
                    <el-input v-model="OrderData.age" size="mini"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="身高/体重">
                <el-input v-model="OrderData.HeightWeight" size="mini"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-row>
                <el-col :span="8">
                  <el-form-item label="是否哺乳">
                    <el-input v-model="OrderData.is_brq" size="mini"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="是否妊娠">
                    <el-input v-model="OrderData.is_rs" size="mini"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="妊娠日期">
                    <el-input v-model="OrderData.rs_start_time" size="mini"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="医保病人">
                <el-input v-model="OrderData.ybbr" size="mini"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-row>
                <el-col :span="8">
                  <el-form-item label="军人">
                    <el-input v-model="OrderData.jun_ren" size="mini"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="肝损程度">
                    <el-input v-model="OrderData.gz_tag" size="mini"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="肾损程度">
                    <el-input v-model="OrderData.sz_tag" size="mini"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="处方医生">
                <el-input v-model="OrderData.doctorName" size="mini"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="医生编号">
                <el-input v-model="OrderData.doctorCode" size="mini"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-tabs type="border-card">
          <el-tab-pane label="用药信息">
            <el-table
              :data="OrderData.ordersList"
              border
              height="300"
              style="width: 100%;font-size:12px;"
            >
              <el-table-column prop="tag_txt" label="成组" width="100"></el-table-column>
              <el-table-column prop="isTempDrug_txt" label="临时" width="100"></el-table-column>
              <el-table-column prop="drugName" label="药品名称" width="280"></el-table-column>
              <el-table-column prop="routeName" label="给药途径" width="100"></el-table-column>
              <el-table-column label="每次用量">
                <template slot-scope="scope">{{scope.row.liang_ci}}瓶</template>
              </el-table-column>
              <el-table-column prop="pinci" label="频次"></el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="诊断信息">
            <el-table
              :data="OrderData.allergensList"
              height="300"
              border
              style="width: 100%;font-size:12px;"
            >
              <el-table-column prop="disCode" label="诊断编码" width="180"></el-table-column>
              <el-table-column prop="disName" label="诊断名称"></el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="过敏源信息">
            <el-table
              :data="OrderData.allergensList"
              border
              height="300"
              style="width: 100%;font-size:12px;"
            >
              <el-table-column prop="allerCode" label="过敏源信息" width="180"></el-table-column>
              <el-table-column prop="allerName" label="过敏源编码"></el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </el-card>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import BaseSearchBar from "./BaseSearchBar";
import {
  getResultsReviewList,
  getdate,
  getDialogReview,
  SaveExamEditFilter,
  getDialogOrderDetail
} from "@/api/rad";
export default {
  name: "MainPage",
  components: {
    BaseSearchBar
  },
  created: function() {
    this.getResultsReviewList();
  },
  methods: {
    // 监听pagesize改变的事件
    handleSizeChange(newSize) {
      console.log(newSize);
      this.queryInfo.pageSize = newSize;
      this.getResultsReviewList();
    },
    // 当前展示的页面
    handleCurrentChange(newPage) {
      console.log(newPage);
      this.queryInfo.page = newPage;
      this.getResultsReviewList();
    },
    handleClose(done) {
      done();
    },
    async getResultsReviewList() {
      let _this = this;
      let res = await this.$rad.getResultsReviewList({
        startTime: _this.queryInfo.startTime,
        endTime: _this.queryInfo.endTime,
        drugKeyword: _this.queryInfo.drugKeyword,
        ysdm: _this.queryInfo.ysdm,
        deptId: _this.queryInfo.deptId,
        search_slCode: _this.queryInfo.search_slCode,
        filterState: _this.queryInfo.filterState,
        type: _this.queryInfo.type,
        page: _this.queryInfo.page,
        pageSize: _this.queryInfo.pageSize
      });
      this.ResultsReviewList = res.rows;
      this.total = res.total;
      console.log(res);
    },
    getSearchReviewList(data) {
      this.queryInfo.startTime = data.startTime;
      this.queryInfo.endTime = data.endTime;
      this.queryInfo.drugKeyword = data.drugKeyword;
      this.queryInfo.ysdm = data.ysdm;
      this.queryInfo.deptId = data.deptId;
      this.queryInfo.search_slCode = data.deptId;
      this.queryInfo.filterState = data.filterState;
      this.queryInfo.type = data.type;
      console.log(data);
      this.getResultsReviewList();
    },

    //时间戳转时间
    getDate(data) {
      return this.$rad.getdate(data);
    },
    dialogReview(id) {
      this.dialogData.id = id;
      this.getDialogReview();
      this.dialogVisible = true;
    },
    async getDialogReview() {
      let res = await this.$rad.getDialogReview({
        id: this.dialogData.id
      });
      this.resultList.drugName = res.userExam.drugNames;
      this.resultList.type_txt = res.type_txt;
      this.resultList.slCode_txt = res.slCode_txt;
      this.resultList.warning = res.userExam.warning;
      this.resultList.abstractDesc = res.userExam.abstractDesc;
      console.log(this.resultList);
    },
    async SaveExamEditFilter() {
      let res = await this.$rad.SaveExamEditFilter({
        id: this.dialogData.id,
        warning: this.resultList.NewExamDescri,
        slCode: this.resultList.slCode
      });
      console.log(res);
      if (res.code == 1) {
        this.dialogVisible = false;
        this.getResultsReviewList();
        return this.$message({
          type: "success",
          message: res.msg
        });
      } else {
        return this.$message({
          type: "error",
          message: res.msg
        });
      }
    },
    async dialogOrder(id) {
      let res = await this.$rad.getDialogOrderDetail({
        id: id
      });
      console.log(res);
      this.OrderData.ordersList = res.ordersList;
      this.OrderData.diseaseList = res.diseaseList;
      this.OrderData.allergensList = res.allergensList;
      this.OrderData.mz_jz_zyh = res.patInfo.mz_jz_zyh;
      this.OrderData.deptName = res.patInfo.deptName;
      this.OrderData.lsh_num = res.patInfo.lsh_num;
      this.OrderData.patientName = res.patInfo.patientName;
      this.OrderData.sex = res.patInfo.sex == 1 ? "男" : "女";
      this.OrderData.age = res.age;
      this.OrderData.rs_start_time = res.patInfo.rs_start_time;
      this.OrderData.HeightWeight =
        res.patInfo.height + "/" + res.patInfo.weight;
      this.OrderData.is_brq =
        res.patInfo.is_brq == -1
          ? "无法获取哺乳状态"
          : res.patInfo.is_brq == 1
          ? "是"
          : "不是";
      this.OrderData.is_rs =
        res.patInfo.is_rs == -1
          ? "无法获取哺乳状态"
          : res.patInfo.is_rs == 1
          ? "是"
          : "不是";
      this.OrderData.ybbr = res.patInfo.ybbr;
      console.log(res.patInfo.ybbr);
      this.OrderData.jun_ren = res.patInfo.jun_ren;
      this.OrderData.gz_tag = res.patInfo.gz_tag;
      this.OrderData.sz_tag = res.patInfo.sz_tag;
      this.OrderData.doctorName = res.patInfo.doctorName;
      this.OrderData.doctorCode = res.patInfo.doctorCode;
      this.dialogPrescriptionVisible = true;
    }
  },
  data() {
    return {
      // 列表的参数对象
      queryInfo: {
        // 开始时间
        startTime: "",
        // 结束时间
        endTime: "",
        // 药品名称
        drugKeyword: "",
        // 医生名称
        ysdm: "",
        // 科室名称
        deptId: "",
        // 审查类别 0：拦截，1：禁忌，2：不推荐，3：轻微
        search_slCode: "",
        // 滤镜状态 1：不为空，0为空
        filterState: "",
        // 审查类型 1 剂量 2体外配伍
        type: "",
        // 当前的页数
        page: 1,
        // 当前页显示多少数据
        pageSize: 20
      },
      total: 0,
      ResultsReviewList: [],
      dialogVisible: false,
      dialogData: {
        id: ""
      },
      resultList: {
        doctorCode: "",
        doctorName: "",
        patientName: "",
        drugName: "",
        type_txt: "",
        slCode_txt: "",
        warning: "",
        abstractDesc: "",
        slCode: "",
        NewExamDescri: ""
      },
      dialogPrescriptionVisible: false,
      OrderData: {
        // 门/急/住院号
        mz_jz_zyh: "",
        // 科室名称
        deptName: "",
        // 门诊流水/住院次数
        lsh_num: "",
        // 病人姓名
        patientName: "",
        //性别
        sex: "",
        // 年龄
        age: "",
        //身高体重
        HeightWeight: "",
        is_brq: "",
        is_rs: "",
        rs_start_time: "",
        ybbr: "",
        jun_ren: "",
        gz_tag: "",
        sz_tag: "",
        doctorName: "",
        doctorCode: "",
        ordersList: [],
        diseaseList: [],
        allergensList: []
      }
    };
  }
};
</script>
<style scoped>
.main-page {
  font-size: 12px;
}
.el-card {
  margin-left: 3px;
}
.SearchT {
  display: flex;
  justify-content: flex-end;
  height: 50px;
  align-items: center;
  background-color: #e6edf3;
  font-size: 14px;
}
.tableLable {
  flex: 1;
  text-align: left;
  margin-left: 15px;
  letter-spacing: 2px;
  font-size: 14px;
  color: #32a6f3;
  font-weight: bold;
}
/* .exportBtn {
  margin-right: 23px;
}
.BatchDeleBtn {
  margin-right: 15px;
} */
.tableStyle {
  width: 100%;
  height: 100%;
}
.card-table {
  width: 100%;
  height: 75%;
}
.block {
  text-align: center;
  margin-top: 12px;
  margin-bottom: 12px;
}
.dialogFilter >>> .el-card__body {
  padding: 5px 10px 0px 20px;
}
.dialogForm {
  height: 41px;
}
.drugForm {
  width: 100%;
}
.XinShenCha {
  width: 100%;
}
.XinShenCha >>> .el-form-item__content {
  width: 70%;
}
.PrescripInfo >>> .el-form-item__label {
  font-size: 12px;
}
.PrescripInfo >>> .el-form-item {
  margin-bottom: 0px;
}
.PrescripCard >>> .el-card__body {
  padding: 0px 10px 0px 10px;
}
.viewDeta >>> span {
  color: darkgray;
}
.addDeta >>> span {
  color: hotpink;
}
</style>
